import React from 'react';
import { View } from 'react-native';
import PropTypes from 'prop-types';
import Label from './Label';
import fn from '../../components/PlateformHalf';

const SWATCH_WIDTH = fn(100);

const Swatch = ({ color, name }) => (
  <View name={name} style={{ marginBottom: fn(48), marginLeft: fn(12), marginRight: fn(12) }}>
    <View
      style={{
        width: SWATCH_WIDTH,
        height: SWATCH_WIDTH,
        backgroundColor: color,
        borderRadius: 4,
        marginBottom: 8,
      }}
    />
    <Label bold>{name}</Label>
    <Label>{color}</Label>
  </View>
);
Swatch.propTypes = {
  /**
   * ### Swatch 属性说明
   *
   * 样本
   *
   * | Name | Type | Default | Details | isRequired |
   * | ------:| -----------:| -----------: | -----------: | ------:|
   * | color | string | | 颜色色值 |yes|
   * | name | string | | 名字 |yes|
   *
   * ### Swatch 代码示例(详见示例项目)
   *
   * ```html
   * <Swatch theme={colors} />
   * ```
   */
  color: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
};
export default Swatch;
